@import "tw-animate-css";
@import "tailwindcss";
@import "tailwindcss";

/* Custom scrollbar */
.chat-scrollbar::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.chat-scrollbar::-webkit-scrollbar-track,
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.chat-scrollbar::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

.chat-scrollbar::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.8);
}

.scrollbar-thumb-slate-300::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.6);
}

.scrollbar-thumb-slate-600::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
}

.scrollbar-track-transparent::-webkit-scrollbar-track {
  background: transparent;
}

/* Message animations */
.message-enter {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.typing-indicator {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

.message-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

/* Dark mode */
.dark-mode {
  background: #1a1a1a;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Smooth transitions */
* {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Improved focus styles */
.focus-ring {
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

/* Loading animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.glass,
.glass-dark {
  backdrop-filter: blur(10px);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .chat-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .gradient-bg {
    background: linear-gradient(135deg, #4c1d95 0%, #581c87 100%);
  }
  .message-gradient {
    background: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better accessibility */
.focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

/* Custom selection styling */
::selection {
  background: rgba(139, 92, 246, 0.3);
}

::-moz-selection {
  background: rgba(139, 92, 246, 0.3);
}

:root {
  --main: oklch(0.97 0 0);
  --main-secondary: oklch(97% 0 0);
  --main-foreground: oklch(0.925 0 0);
  --main-muted: oklch(0.96 0 0);
  --main-background: oklch(0.97 0 0);
  --main-invert: oklch(0.205 0 0);

  --primary: oklch(0 0 0);
  --primary-invert: oklch(1 0 0);
  --primary-foreground: oklch(37.1% 0 0);
  --primary-muted: oklch(0.556 0 0);

  --border: oklch(0.885 0 0);
}

.dark {
  --main: oklch(0.178 0 0);
  --main-secondary: oklch(0.205 0 0);
  --main-foreground: oklch(0.269 0 0);
  --main-muted: oklch(0.168 0 0);
  --main-background: oklch(0.145 0 0);
  --main-invert: oklch(0.8 0 0);

  --primary: oklch(1 0 0);
  --primary-invert: oklch(0 0 0);
  --primary-foreground: oklch(0.97 0 0);
  --primary-muted: oklch(0.708 0 0);

  --border: oklch(0.26 0 0);
}

@theme inline {
  --color-main: var(--main);
  --color-main-secondary: var(--main-secondary);
  --color-main-foreground: var(--main-foreground);
  --color-main-muted: var(--main-muted);
  --color-main-background: var(--main-background);
  --color-main-invert: var(--main-invert);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-muted: var(--primary-muted);
  --color-primary-invert: var(--primary-invert);

  --color-border: var(--border);

  --animate-shine: shine 6s linear infinite;
  --animate-text-gradient: text-gradient 2s linear infinite;
  --animate-text-shake: text-shake 1s ease 1;
  --animate-brightness: brightness 2.2s linear infinite;
  --animate-spinner: spinner 1.2s linear infinite;
  --animate-accordion-open: accordion-open 0.2s ease-out;
  --animate-accordion-close: accordion-close 0.2s ease-out;

  @keyframes accordion-open {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-close {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes shine {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -400% 0;
    }
  }

  @keyframes text-gradient {
    to {
      background-position: 200% center;
    }
  }

  @keyframes text-shake {
    15% {
      transform: translateX(5px);
    }
    30% {
      transform: translateX(-5px);
    }
    50% {
      transform: translateX(3px);
    }
    80% {
      transform: translateX(2px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes brightness {
    0% {
      transform: skew(-13deg) translateX(-100%);
    }
    100% {
      transform: skew(-13deg) translateX(100%);
    }
  }

  @keyframes spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.15;
    }
  }
}
